<!-- audio code credit to karen @https://github.com/ksivaneri001/pset-9
/ @  https://ksivaneri001.github.io/pset-9/index.html-->

<!DOCTYPE html>
<html lang="en">
  <head>
   	<title>connect 4</title>
    <link rel="shortcut icon" href="images/connect4.png" />
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/minecraftia" type="text/css"/>
    <!-- minecraft font -->
		<!-- <link rel="stylesheet" href="styles/connect4.css" /> -->
    <link href="css/connect4.css" rel="stylesheet" type="text/css" />
    <script defer src="js/connect4.js"></script>
  </head>
  <body>
      <audio id="z-audio">
        <source src="audio/minecraft-zombie.mp3" type="audio/mpeg">
      </audio>
    <!--  <audio id="game-over-audio">
          <source src="audio/game_over.mp3" type="audio/mpeg">
      </audio>
      <audio id="glass-break-audio">
      <source src="audio/glass_break.mp3" type="audio/mpeg">
    </audio> -->
		<div id = "home">
			<a href="index.html"><img src="images/home.png"></a>
		</div>
      <h1>connect four</h1>
      <h2 id="turn">turn: zombie</h2>
      </div>
     <div class="container column">
      <div class="wrap container" id="board">
        <div class="square" id="square0"></div>
        <div class="square" id="square1"></div>
        <div class="square" id="square2"></div>
        <div class="square" id="square3"></div>
        <div class="square" id="square4"></div>
        <div class="square" id="square5"></div>
        <div class="square" id="square6"></div>
        <div class="square" id="square7"></div>
        <div class="square" id="square8"></div>
        <div class="square" id="square9"></div>
        <div class="square" id="square10"></div>
        <div class="square" id="square11"></div>
        <div class="square" id="square12"></div>
        <div class="square" id="square13"></div>
        <div class="square" id="square14"></div>
        <div class="square" id="square15"></div>
        <div class="square" id="square16"></div>
        <div class="square" id="square17"></div>
        <div class="square" id="square18"></div>
        <div class="square" id="square19"></div>
        <div class="square" id="square20"></div>
        <div class="square" id="square21"></div>
        <div class="square" id="square22"></div>
        <div class="square" id="square23"></div>
        <div class="square" id="square24"></div>
        <div class="square" id="square25"></div>
        <div class="square" id="square26"></div>
        <div class="square" id="square27"></div>
        <div class="square" id="square28"></div>
        <div class="square" id="square29"></div>
        <div class="square" id="square30"></div>
        <div class="square" id="square31"></div>
        <div class="square" id="square32"></div>
        <div class="square" id="square33"></div>
        <div class="square" id="square34"></div>
        <div class="square" id="square35"></div>
        <div class="square" id="square36"></div>
        <div class="square" id="square37"></div>
        <div class="square" id="square38"></div>
        <div class="square" id="square39"></div>
        <div class="square" id="square40"></div>
        <div class="square" id="square41"></div>
      </div>

      <center><div id="reset-button">Play Again!</div></center>
    </div>
  </body>
</html>
